<template>
  <div >
    <el-form :rules="rules" ref="openoticeAdd" :model="openoticeAdd" label-width="80px">
        <el-form-item>
            <el-button  @click="toOpenoticeListPage">《 返回</el-button>
        </el-form-item>
        <el-form-item label="文章名称" prop="ntitle" >
            <el-input v-model="openoticeAdd.ntitle" style="width:600px"></el-input>
        </el-form-item>
        <el-form-item label="文章内容" prop="myQuillEditor" >
            <div ref="myQuillEditor" style="height:400px;width:1005px" ></div>
        </el-form-item>
        <el-form-item label="话题专栏">
          <el-select v-model="openoticeAdd.topic" placeholder="请选择话题" style="width:150px">
            <el-option label="健康膳食" value="健康膳食"></el-option>
            <el-option label="锻炼运动" value="锻炼运动"></el-option>
            <el-option label="预防疾病" value="预防疾病"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布状态" prop="nstate">
          <el-radio-group v-model="openoticeAdd.nstate">
            <el-radio label="草稿"></el-radio>
            <el-radio label="立即发布" value="已发布"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="openoticeModify()">提交</el-button>
          <el-button type="primary" @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>
 
<script>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'
 
export default {
  name: 'App',
  data() {
    return {
        //规则
        rules: {
          ntitle: [
            //required：必填，message：提示信息，trigger：什么时候触发事件，burl失去焦点的时候触发
            { required: true, message: '请输入标题', trigger: 'blur' },
          ],
          //validator验证器是一个checkEmail方法，但是这个方法需要在data中定义
          myQuillEditor: [{ required: true, message: '请输入内容', trigger: 'blur' }]
        },
        openoticeAdd: {},
        quill:null,
    };
  },
  
  mounted() {
    this.initializeQuillEditor();
    this.getNoticeByNid();

  },
  methods: {
    getNoticeByNid(){
        console.log("获取地址栏参数："+this.$route.params.nid)
        this.$axios.post("notice/"+this.$route.params.nid).then((resp) => {
        this.openoticeAdd = resp.data.data;
         this.quill.root.innerHTML=resp.data.data.ncontent;
      });
    },

    //取消
    cancel() {
        this.$confirm('是否取消添加操作', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.$message({
            type: 'success',
            message: '取消成功!'
          });
          this.toOpenoticeListPage();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消失败'
          });
        });
      },

    //返回
    toOpenoticeListPage(){
        this.$router.push("/OpeNoticeList");
    },
    
    // // 点击按钮时触发，递增序列号
    // generateSerialNumber() {
    //   this.currentSerial = (this.currentSerial + 1) % 1000;
    // },
    // // 补齐前导零以保持三位数
    // padStart(value) {
    //   return String(value).padStart(3, '0');
    // },

    initializeQuillEditor() {
        if (this.$refs.myQuillEditor) {  
        this.quill = new Quill(this.$refs.myQuillEditor, {  
              modules: {
        //富文本编辑器组件
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            // [{ 'script': 'sub' }, { 'script': 'super' }],
            //[{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],
            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],
            ['clean'],
            ['link', 'image', 'video']
          ]
        },
          theme: 'snow', // 或者 'bubble'  
          // 其他Quill配置...  
        });  
      } else {  
        console.error('DOM元素未找到，无法初始化Quill');  
      }  
    
    },
    //添加员工formName
    openoticeModify() {
        if (this.quill) {  
        console.log("添加openoticeAdd" + JSON.stringify(this.openoticeAdd));
            //如果为真，验证通过，向后端发请求
            this.openoticeAdd.ncontent= this.quill.root.innerHTML;  
            console.log(this.openoticeAdd.ncontent); 
            this.$axios.post("notice/updateNotice", this.openoticeAdd).then((resp) => {
                if (resp.data.code == 200) {
                     this.$message("编辑成功");
                     this.$router.push("/OpeNoticeList");
                  }else {
                    this.$message(JSON.stringify(resp.data.msg));
                  }
            });
            
      } else {  
        console.error('Quill 实例未初始化');  
      }  
        
    },
    beforeDestroy() {  
    // 清理 Quill 实例  
    if (this.quill) {  
      this.quill.destroy();  
    }  
  },  
    
  }
}
</script>
 
<style>
#app {
  text-align: center;
}
</style>